import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
	DatasetComponent,
	LegendComponent,
	TooltipComponent,
	GridComponent,
	DataZoomSliderComponent
} from 'echarts/components';
import {
	CanvasRenderer
	// SVGRenderer,
} from 'echarts/renderers';

echarts.use([
	GridComponent,
	LineChart,
	CanvasRenderer,
	LegendComponent,
	TooltipComponent,
	DatasetComponent,
	DataZoomSliderComponent
]);
import { commonOptions } from '@/app/components/echarts/commonOption';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

const formatNumber = (value: number) => {
	if (value >= 1000000) {
	  return (
		(Math.round((Number(value) / 1000000) * 10) / 10).toLocaleString() + "M"
	  );
	} else if (value >= 1000) {
	  return Math.round(Number(value) / 1000).toLocaleString() + "K";
	}
	return value.toLocaleString();
  };

export default function SeawatLineChart(props: {
	slider?: boolean;
	boxStyle?: React.CSSProperties;
	labels: string[];
	dataset: { data: {value: Array<string | number | null>, label:{[key: string]: string}}[]; label: string, areaTopColor: string, labelColor: string, lineStyle:string }[];
}) {
	const { labels, dataset } = props;
	const options = {
		...commonOptions,
		yAxis: {
			...commonOptions.yAxis,
			onZero: false,
			axisLabel: {
				color: '#666',
				fonSize: px2vw(12),
				formatter: function (value: string) {
					return formatNumber(Number(value));
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dashed',
					color: '#474A68',
					width: px2vw(1)
					// dashOffset: 50
				}
			}
		},

		xAxis: { ...commonOptions.xAxis, data: labels,axisLabel:{color: '#666',interval: 0 ,margin: 16} },
		color: ['#47B0FA'],
		legend: {
			icon: 'rect',
			right: 0,
			itemWidth: px2vw(14),
			itemHeight: 2,
			textStyle: {
				color: 'rgba(223,242,255,0.6)',
			
			}
			
		},
		series: dataset?.map(i => {
			return {
				type: 'line',
				data: i.data,
				name: i.label,
				smooth: false,
				lineStyle: {
					color: i.lineStyle,
				},
				itemStyle: {
					color: i.lineStyle,
				},
				areaStyle: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: i.areaTopColor // 0% 处的颜色
							},
							{
								offset: 1,
								color: 'rgba(95,179,248,0)' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					}
				},
				label: {
					show: true,
					position: 'top',
					color: i.labelColor,
					fontWeight: 'bold',
					hideOverlap: true,
					distance: 3,
					fontSize: 9,
					formatter: function ({ value }: { value: number[] }) {
						return formatNumber(Number(value[1] || 0));
					}
					// formatter(v) {
					// 	return v.value > 0 ? v.value : '';
					// }
				}
				// color: '#FCAF2B'
			};
		}),
		grid: {
			// containLabel: true,
			left: 55,
			right: 10	,
			top: 65,
			bottom: 28
		},
		dataZoom: [
			// {
			// 	type: 'slider',
			// 	show: !!props.slider,
			// 	startValue: Math.max((dataset?.[0].y.length || 2) - 6, 0),
			// 	endValue: (dataset?.[0].y?.length || 1) - 1,
			// 	minValueSpan: 4,
			// 	// maxValueSpan:2,
			// 	brushSelect: false,
			// 	labelFormatter: function () {
			// 		return '';
			// 	}
			// 	// bottom: 40
			// }
		]
	};
	return (
		<div
			style={{
				position: 'relative',
				width: '100%',
				height: '100%',
				flexGrow: 1,
				...props.boxStyle
			}}
		>
			<ReactEChartsCore
				echarts={echarts}
				option={options}
				notMerge={true}
				lazyUpdate={true}
				style={{
					width: '100%',
					height: '100%'
				}}
			/>
		</div>
	);
}

